<template>
  <div>
    <el-dialog :visible.sync="addEditIsDialog_c" width="130rem !important">
      <div class="nx-content">
        <div class="el-icon-close title-close" @click="reset"></div>
        <div class="top-content">
          <el-form :inline="true" ref="formChildName" :model="ruleForm" class="demo-form-inline form-head">
            <el-form-item label="转移单号"><el-input v-model="ruleForm.code" placeholder="" readonly></el-input></el-form-item>
            <el-form-item label="出入库类型">
              <el-input v-model="ruleForm.typeName" placeholder="请输入" readonly></el-input>
            </el-form-item>
            <el-form-item label="转移日期">
              <el-date-picker v-model="ruleForm.transferDate" type="date" :editable="false" placeholder="请选择" align="right" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" popper-class="dateSelect"> </el-date-picker>
            </el-form-item>
            <el-form-item label="装鱼日期">
              <el-date-picker v-model="ruleForm.workInDate" type="date" :editable="false" placeholder="请选择" align="right" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%"> </el-date-picker>
            </el-form-item>
            <el-form-item label="卸鱼日期">
              <el-date-picker v-model="ruleForm.workOutDate" type="date" :editable="false" placeholder="请选择" align="right" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%"> </el-date-picker>
            </el-form-item>
            <el-form-item label="单兵" label-width="10.2rem">
              <el-select v-model="ruleForm.workInUser" placeholder="请选择" clearable :popper-append-to-body="false">
                <el-option v-for="item in soldiersArray" :key="item.id" :label="item.soldierName" :value="item.soldierNumber"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="车辆" label-width="8.5rem">
              <el-select v-model="ruleForm.carNumber" placeholder="请选择" clearable :popper-append-to-body="false" @change="carChange">
                <el-option v-for="item in carsArray" :key="item.id" :label="item.carNumber" :value="item.carNumber"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="司机" label-width="8.5rem">
              <el-select v-model="ruleForm.carUser" placeholder="请选择" clearable :popper-append-to-body="false">
                <el-option v-for="item in carUsersArray" :key="item.id" :label="item.carUser" :value="item.carUser"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出发地" label-width="8.5rem">
              <el-select v-model="ruleForm.addressDeparture" placeholder="请选择" clearable :popper-append-to-body="false">
                <el-option v-for="item in addresssArray" :key="item.id" :label="item.address" :value="item.address"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="到达地" label-width="10.2rem">
              <el-select v-model="ruleForm.addressArrival" placeholder="请选择" clearable :popper-append-to-body="false">
                <el-option v-for="item in addresssArray" :key="item.id" :label="item.address" :value="item.address"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运输单号" label-width="8.5rem">
              <el-input v-model="ruleForm.trackNumber" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="备注" label-width="8.5rem">
              <el-input v-model="ruleForm.remark" placeholder="请输入"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="center-content">
          <NxTablePad :table-cols="tableCols" :table-data="tableData" :pagInationIf="false" :height="'28.5rem'" :isIndex="true" class="table-wrap">
            <template slot="sex" slot-scope="scope">
              <span v-if="scope.row.sex == 0">未鉴定</span>
              <span v-if="scope.row.sex == 1">雄</span>
              <span v-if="scope.row.sex == 2">雌</span>
            </template>
          </NxTablePad>
        </div>
        <div class="bottom-content">
          <div class="left">
            <div>条数合计：{{ calcNum }}</div>
            <div>重量合计：{{ calcWeight }}</div>
          </div>
          <div class="right">
            <el-button class="btn" @click="handleBack()">上一步</el-button>
            <el-button class="btn-light-blue btn" @click="submitForm('formChildName')">确 认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import NxTablePad from "@/components/NxTablePad.vue";
import { getObjSoldiers, getObjAddresss, getObjCars, getObjCarDrivers } from "@/api/breeding";
import { createTransferDatas } from "@/api/transfer";
export default {
  components: {
    NxTablePad,
  },
  props: {
    companyId: {
      type: String,
      default: "",
    },
    baseId: {
      type: String,
      default: "",
    },
    infosData: {
      type: Array,
    },
    calcNum: {
      type: String,
      default: "",
    },
    generationIsDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchForm: {
        // 表单字段
        outFishpondId: "",
        inFishpondId: "",
        fishCode: "",
        num: "",
        diameter: "",
      },
      ruleForm: {
        companyId: "",
        baseId: "",
        type: 0,
        code: "",
        list:[],
        addressArrival: "",
        typeName: "内部转移",
        addressDeparture: "",
        carNumber: "",
        carUser: "",
        remark: "",
        transferDate: "",
        workInDate: "",
        workInUser: "",
        workOutDate: "",
      },
      tableCols: [
        {
          label: "转出鱼池",
          prop: "outFishCode",
          align: "center",
          // width: "110",
        },
        {
          label: "鱼池名称",
          prop: "outFishName",
          align: "center",
          // width: "110",
        },
        {
          label: "鱼种",
          prop: "fishTypeName",
          align: "center",
        },
        {
          label: "鱼名",
          prop: "fishName",
          align: "center",
        },
        {
          label: "批次",
          prop: "batchName",
          align: "center",
        },
        {
          label: "性别",
          slot: "sex",
          align: "center",
        },
        {
          label: "卵径",
          prop: "diameter",
          align: "center",
        },
        {
          label: "尾数",
          prop: "num",
          align: "center",
        },
        {
          label: "初重",
          prop: "initialWeight",
          align: "center",
          width: "100",
        },
        {
          label: "总重",
          prop: "weight",
          align: "center",
        },
        {
          label: "转入鱼池",
          prop: "inFishCode",
          align: "center",
          width: "100",
        },
        {
          label: "鱼池名称",
          prop: "inFishName",
          align: "center",
          width: "110",
        },
      ],
      tableData: [],
      InOutTypesArray:[],
      calcWeight:0, // 计算重量
      soldiersArray: [], // 单兵集合
      addresssArray: [], // 地址集合
      carsArray: [], // 车辆集合
      carUsersArray: [], // 司机集合
      transferData: {}, // 表头数据
      addEditIsDialog_c: false, // 弹窗是否显示
      pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
    };
  },
  inject:['closeOperation'],
  watch: {
    generationIsDialog(val) {
      this.addEditIsDialog_c = val;
      if (this.addEditIsDialog_c) {
        this.tableData = this.infosData;
        this.tableData.forEach((item)=>{
          this.calcWeight += item.weight;
        })

        if (window.localStorage.getItem("transferData")) {
          this.transferData = JSON.parse(window.localStorage.getItem("transferData"));
          this.ruleForm.workInUser = this.transferData.workUser;
          this.ruleForm.workInDate = this.transferData.workInDate;
          this.ruleForm.workOutDate = this.transferData.workOutDate;
          this.ruleForm.addressDeparture = this.transferData.addressDeparture;
          this.ruleForm.addressArrival = this.transferData.addressArrival;
          this.ruleForm.carNumber = this.transferData.carNumber;
          this.ruleForm.carUser = this.transferData.carUser;
        }
        this.ruleForm.companyId = this.companyId;
        this.ruleForm.baseId = this.baseId;
        this.ruleForm.code = this.tableData[0].transferNumber;
        this.getObjSoldiers();
        this.getObjAddresss();
        this.getObjCars();
      }
    },
  },
  methods: {
    // 提交
    submitForm(formChildName) {
      this.$refs[formChildName].validate((valid) => {
      if (valid) {
      this.ruleForm.list = this.tableData;
        createTransferDatas(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });

                // 关闭弹窗
                this.$parent.closeAddEdit();
                // 刷新列表
                this.reset();
              }
            });
        }
      });
    },
    // 取消
    resetForm() {
      this.searchForm = {
        outFishpondId: "",
        inFishpondId: "",
        fishCode: "",
        num: "",
        diameter: "",
      };
      this.tableData = this.infosData;
      this.calcWeight = 0;
      this.ruleForm.companyId = this.companyId;
      this.ruleForm.baseId = this.baseId;
      this.ruleForm.code = '';
      this.$parent.closeAddEdit();
    },
    // 取消
    reset() {
      this.searchForm = {
        outFishpondId: "",
        inFishpondId: "",
        fishCode: "",
        num: "",
        diameter: "",
      };
      this.ruleForm = {
        companyId: "",
        baseId: "",
        type: 0,
        code: "",
        list:[],
        addressArrival: "",
        typeName: "内部转移",
        addressDeparture: "",
        carNumber: "",
        carUser: "",
        remark: "",
        transferDate: "",
        workInDate: "",
        workInUser: "",
        workOutDate: "",
      },
      this.tableData = this.infosData;
      this.calcWeight = 0;
      this.ruleForm.companyId = this.companyId;
      this.ruleForm.baseId = this.baseId;
      this.ruleForm.code = '';
      this.closeOperation();
      this.$parent.closeAddEdit();
    },
  // 上一步
  handleBack(){
    this.resetForm();
    this.$parent.closeAddEdit();
    },
  // 获取单兵列表
  getObjSoldiers() {
      getObjSoldiers({ id: this.baseId }).then((res) => {
        if (res.code == 200) {
          this.soldiersArray = res.data;
        }
      });
    },
  // 获取地址列表
  getObjAddresss() {
      getObjAddresss().then((res) => {
        if (res.code == 200) {
          this.addresssArray = res.data;
        }
      });
    },
  // 获取车辆列表
  getObjCars() {
      getObjCars().then((res) => {
        if (res.code == 200) {
          this.carsArray = res.data;
        }
      });
    },
    // 类型切换
    carChange(val){
      this.ruleForm.carUser = '';
      this.carUsersArray = [];

      let obj = this.carsArray.find((item)=>{
        return item.carNumber == val+'';
      });
      this.getObjCarDrivers(obj.id);
    },
    // 获取车辆司机列表
    getObjCarDrivers(id) {
      if (this.ruleForm.carNumber === "" || this.ruleForm.carNumber == null) {
        return;
      }

      getObjCarDrivers({id:id}).then((res) => {
        if (res.code == 200) {
          this.carUsersArray = res.data;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog__close {
  font-size: 3.69rem !important;
  display: none;
}
/deep/.el-dialog__headerbtn {
  top: 0.828571rem;
}
/deep/.el-dialog__body {
  font-size: 1.86rem !important;
}
.nx-content {
  width: 100% !important;
  height: 60rem !important;
  display: flex;
  flex-direction: column;
  position: relative;
  .title-close {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    // border: 1px solid red;
    font-size: 3.56rem;
    position: absolute;
    top: 0.4rem;
    right: 1.2rem;
  }
}

.top-content {
  border-radius: 0.5rem;
  width: 100%;
  height: 35%;
  border: 0.2rem solid #e4eaee;
  margin-top: 2.8rem;
  .form-head {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /deep/.el-form-item__content {
      // width: 20.64rem;
      line-height: 3.957143rem;
      font-size: 2.16rem;
    }
    /deep/.el-input__inner {
      width: 20.74rem;
      height: 4.5rem;
    }
    /deep/ .el-form-item__label {
      font-size: 1.86rem;
      line-height: 4.1rem;
    }
    /deep/.el-form-item {
      margin-top: 0.571429rem;
      margin-bottom: 0.571429rem;
    }
    /deep/.el-input {
      font-size: 2.06rem !important;
    }
    /deep/.el-input__icon {
      line-height: 4.357143rem;
    }
    ::v-deep .el-date-picker.has-sidebar {
      width: 41.285714rem !important;
    }
    ::v-deep .el-select-dropdown__empty {
      padding: 0.814286rem 3.3rem;
      font-size: 2.16rem;
    }
    ::v-deep .el-select-dropdown__list {
      .el-select-dropdown__item {
        font-size: 2.16rem;
        height: 4.428571rem;
        line-height: 4.428571rem;
      }
    }
  }
}

.center-content {
  margin-top: 1rem;
  width: 100%;
  height: 50%;
  border: 0.2rem solid #e4eaee;
  padding-bottom: 1rem;
  border-bottom: 0.2rem solid #ebeff1;
}
.bottom-content {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  // border: 1px solid red;
  .left {
    width: 35%;
    display: flex;
    justify-content: space-between;
    line-height: 4.48rem;
    font-size: 1.86rem;
  }
  .right {
    .btn {
      width: 9.65rem;
      height: 4.48rem;
      font-size: 2.19rem;
      margin-left: 1.3rem;
    }
  }
}
</style>
